<template>
	<view class="info">
		<view class="block">
			<view class="item">
				<view class="title">培训机构</view>
				<input class="content" v-model="dataObj.nickname" disabled />
			</view>
			<view class="item">
				<view class="title">填表日期</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.reg_date" @change="selectDateChange">
					<text>{{dataObj.reg_date}}</text>
				</picker>
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="title">相片</view>
				<image class="avatar" :src="dataObj.avatar" @click="onUploadAvatarTap"></image>
			</view>
			<view class="item">
				<view class="title">姓名</view>
				<input class="content" v-model="dataObj.name" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">出生年月</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.birthday" @change="selectBirthdayChange">
					<text>{{dataObj.birthday}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">性别</view>
				<picker class="content arrow" mode="selector" :range="selectObj.sexArr" :value="dataObj.sex" range-key="label" @change="selectSexChange">
					<text>{{selectObj.sexArr[dataObj.sex]['label']}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">民族</view>
				<input class="content" v-model="dataObj.nation" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">文化程度</view>
				<input class="content" v-model="dataObj.stu_grade" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">身份证号码</view>
				<input class="content" v-model="dataObj.identity_id" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">移动电话</view>
				<input class="content" v-model="dataObj.mobile" placeholder="请输入" />
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="title long">是否广东省户籍</view>
				<picker class="content arrow" mode="selector" :range="selectObj.yesOrNo" :value="dataObj.belong_gd" range-key="label" @change="selectGdChange">
					<text>{{selectObj.yesOrNo[dataObj.belong_gd]['label']}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title long">是否持有广东省社保卡</view>
				<picker class="content arrow" mode="selector" :range="selectObj.yesOrNo" :value="dataObj.belong_gd_sb" range-key="label" @change="selectSbChange">
					<text>{{selectObj.yesOrNo[dataObj.belong_gd_sb]['label']}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">户口性质</view>
				<input class="content" v-model="dataObj.hkxz" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">社保卡发卡地</view>
				<input class="content" v-model="dataObj.sbk_address" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">户籍地址</view>
				<input class="content" v-model="dataObj.hk_address" placeholder="请输入" />
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="title">工作单位</view>
				<input class="content" v-model="dataObj.company_name" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">现有证书</view>
				<input class="content" v-model="dataObj.pert" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">考证时间</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.get_pert_time" @change="selectPertChange">
					<text>{{dataObj.get_pert_time}}</text>
				</picker>
			</view>
		</view>
		<view class="intro">
			<view class="title">学员声明</view>
			<view class="text">本人声明：</view>
			<view class="text">本人非机关事业单位在编人员，非全日制在校生，非技工学校毕业时间未满一年，非退休人员。本年度内未参加过其他同类免费技能培训，现申请报名参加免费技能培训。</view>
		</view>
		<view class="footer" @click="onPostTap">
			<view class="btn">提交</view>
		</view>
	</view>
</template>

<script>
	import { getInfoData, requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				selectObj: {
					sexArr: [{
						value: 0,
						label: '请选择'
					}, {
						value: 1,
						label: '男'
					}, {
						value: 2,
						label: '女'
					}],
					yesOrNo: [{
						value: 0,
						label: '请选择'
					}, {
						value: 1,
						label: '是'
					}, {
						value: 2,
						label: '否'
					}]
				},
				dataObj: {
					nickname: '湛江市仁邦职业培训学校',
					reg_date: '', // 提交日期（以时间戳格式提交）
					form_type: '', // 表格类型，1：表一   2：表二
					avatar: '', // 头像
					name: '', // 姓名
					birthday: '', // 出生日期
					sex: 0, // 性别   1：男   2：女
					nation: '', // 民族
					stu_grade: '', // 文化程度
					identity_id: '', // 身份证
					mobile: '', // 手机
					belong_gd: 0, // 是否广东户籍,   1:是   2：否
					belong_gd_sb: 0, // 是否广东社保 ， 1:是   2：否
					hkxz: '', // 户口性质
					sbk_address: '', // 社保卡地址
					hk_address: '', // 户籍地址
					company_name: '', // 单位名称
					compnay_phone: '', // 单位电话
					pert: '', // 现有证书
					get_pert_time: '', // 考证时间
					intention_work: '', // 报名参加的工作
					body_status: '', // 身体状况
					postcode: '', // 邮政编码
					real_address: '', // 通讯地址
					apply_type: '', // 申请作业类别
					apply_work: '', // 申请作业项目
					apply_type_again: '', // 复审作业类别
					apply_work_again: '', // 复审作业项目
					apply_first_time: '', // 初次申领时间
					last_time_apply: '', // 上次申领时间
					pertid_for_apply: '', // 证书编号
					pert_prover: '' // 发证机关
				},
				dicObj: {
					stu_grade: {
						'1': '初中',
						'2': '高中',
						'3': '中专',
						'4': '大专',
						'5': '本科',
						'6': '硕士',
						'7': '博士',
					}
				}
			}
		},
		onShow() {
			// this.dataObj = uni.getStorageSync('userInfo');
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataObj = uni.getStorageSync('userInfo');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 日期选择
			selectDateChange(res) {
				this.dataObj['reg_date'] = res.detail.value;
			},
			// 生日选择
			selectBirthdayChange(res) {
				this.dataObj['birthday'] = res.detail.value;
			},
			// 考试时间选择
			selectPertChange(res) {
				this.dataObj['get_pert_time'] = res.detail.value;
			},
			// 监听选择框变化
			selectSexChange(res) {
				this.dataObj['sex'] = res.detail.value;
			},
			// 监听选择框变化
			selectGdChange(res) {
				this.dataObj['belong_gd'] = res.detail.value;
			},
			// 监听选择框变化
			selectSbChange(res) {
				this.dataObj['belong_gd_sb'] = res.detail.value;
			},
			// 上传头像
			onUploadAvatarTap() {
				const _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						console.log(res, 'res');
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.renbang.hcxtec.com/api', // 上传的服务器地址
							filePath: tempFilePaths[0],
							method: 'POST',
							name: "file",
							formData: {
								token: uni.getStorageSync('token'),
								address: 'user/uploadMyFile',
								file_type: 1
							}, success: res => {
								const {data, status} = JSON.parse(res.data);
								if (status) {
									this.dataObj.avatar = data['file_path'];
								}
							}
						});
					}
				});
			},
			// 提交
			onPostTap() {
				let pData = this.dataObj;
				pData['form_type'] = 1;
				this.$Requset({
					url: this.$Api['user']['report'],
					data: {
						token: uni.getStorageSync('token'),
						formData: pData
					},
					success: (res) => {
						const { data, status, msg } = res;
						requestErrorTip('toast', msg);
						if (!status) {
							return;
						}
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.info{
		padding-top: 18rpx;
		padding-bottom: 1rpx;
		.block{
			padding: 0 0 0 36rpx;
		}
		.item{
			position: relative;
			display: flex;
			height: 40rpx;
			padding: 32rpx 0 32rpx 0;
			border-bottom: 1rpx solid #EAEFF1;
			&:nth-last-child(1){
				border-bottom: none;
			}
			.title{
				width: 200rpx;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
			}
			.long{
				width: 320rpx;
			}
			.avatar{
				position: absolute;
				top: 50%;
				margin-top: -37rpx;
				right: 36rpx;
				width: 74rpx;
				height: 74rpx;
				background-color: #F7F7F7;
				border-radius: 50%;
			}
			.content{
				flex: 1;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				text-align: right;
				color: #7F7F7F;
				padding-right: 36rpx;
			}
			.arrow{
				position: relative;
				padding-right: 76rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -15rpx;
					right: 36rpx;
					width: 30rpx;
					height: 30rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
			}
		}
		.intro{
			padding: 32rpx 36rpx;
			background-color: #fff;
			border-radius: 22rpx;
			margin-bottom: 36rpx;
			.title{
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
				margin-bottom: 22rpx;
			}
			.text{
				line-height: 48rpx;
				font-size: 22rpx;
				color: #7F7F7F;
			}
		}
		.footer{
			padding: 20rpx 36rpx;
			background-color: #fff;
			.btn{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				color: #fff;
				background-color: $color-common;
				text-align: center;
				border-radius: 35rpx;
			}
		}
	}
</style>
